@extends('home.inc.common')
@section('title')
    <title>{{$cate_info->cate_name}} - 奇异果聚合</title>
    <meta name="keywords" content="{{$cate_info->seo_key}}" />
    <meta name="description" content="{{$cate_info->seo_intro}}" />
    <link href="{{asset('home_new/css/libs.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('home_new/css/global.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('home_new/css/page2.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('home_new/css/page.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('home_new/css/qyg2016.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('home_new/css/ub_list.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('home/js/skin/layer.css')}}" type="text/css" rel="stylesheet" />
    <link href="{{asset('home_new/css/loginPop.css')}}" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="{{asset('home/js/jquery-3.1.0.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('pulgin/layer/layer.js')}}"></script>
    <script src="http://static.geetest.com/static/tools/gt.js"></script>
    <link rel="icon" href="{{asset('home_new/favicon.ico')}}" />
    <style>
        .series_list li {
            margin-bottom: 20px;
            background: #f7f7f7;
        }
    </style>
@endsection
@section('content')
    <div class="wrap">
        <div id="main">
            @include('home.anchor.common-cates')
            <div class="media_content">
                <!-- 视频栏目开始 -->
                <div class="video_wrap">
                    <div class="index_title clear">
                        <div class="index_titleMain">
                            <a class="global_gaNode" href="{{ route('anchor.cate', [$cate_info->cate_id]) }}">
                                <h1>
                                    {{ $cate_info->cate_name }}
                                </h1>
                            </a>
                        </div>
                    </div>
                    <div class="video_series">
                        <div class="series_split_line">
                        </div>
                        <ul class="series_list clear">
                            @foreach($anchors as $item)
                                <li class="series_item{{$loop->index % 4}}">
                                    <a href="{{ route('anchor.show', [$item->id]) }}" target="_blank" class="series_itemImg global_gaNode">
                                        <img src="{{ $item->cover }}" width="265" height="145">
                                        <span class="video_icon index_icons">
                                        </span>
                                        <div class="video_seriesCover"></div>
                                    </a>
                                    <a class="global_gaNode user_ub" href="{{ route('anchor.show', [$item->id]) }}" target="_blank" title="{{ $item->room_name }}">
                                        <span class="user_pic"><img src="{{ $item->avatar }}" alt=""></span>
                                        <h2 class="user_title">
                                            @if (mb_strlen($item->room_name) > 12)
                                                {{ mb_substr($item->room_name, 0, 11) }}..
                                            @else
                                                {{$item->room_name}}
                                            @endif
                                        </h2>
                                        <p>
                                            <span class="ub_name">{{ $item->name }}</span>
                                            <span class="ub_numb">{{ num2word($item->online) }}观众</span>
                                        </p>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                <div class="wrap_go">
                    <span style="right: 160px;"></span>
                    <a href="javascript:void(0);" id="get_more" data-page="1">加载更多</a>
                </div>
            </div>
        </div>
    </div>

    <script>

        var setDisable = function ($this, text) {
            $this.attr('disabled', true);
            $this.text(text);
            layer.msg(text);
        };

        var setEnable = function ($this, text) {
            $this.attr('disabled', false);
            $this.text(text);
        };

        var genElements = function (data) {
            var url = "{{route('anchor.show', [''])}}";
            data.map(function(item, index) {
                return $('.series_list').append(
                        '<li class="series_item'+index % 4+'"> \
                            <a href="'+ url + '/' + item.id +'" target="_blank" class="series_itemImg global_gaNode">\
                                <img src="'+item.cover+'" width="265" height="145">\
                                <span class="video_icon index_icons">\
                                </span>\
                                <div class="video_seriesCover"></div>\
                            </a>\
                            <a class="global_gaNode user_ub" href="'+ url + '/' + item.id +'" target="_blank" title="'+item.room_name+'">\
                                <span class="user_pic"><img src="'+item.avatar+'" alt=""></span>\
                                <h2 class="user_title">\
                                    '+(item.room_name.length > 12 ? item.room_name.substr(0, 11) + '..' : item.room_name)+'\
                                </h2>\
                                <p>\
                                    <span class="ub_name">'+item.name+'</span>\
                                    <span class="ub_numb">'+num2word(item.online)+'观众</span>\
                                </p>\
                            </a>\
                        </li>'
                );
            })
        };

        $('#get_more').on('click', function () {

            var $this = $(this);

            if ($this.attr('disabled')) return;

            setDisable($this, '加载中...');

            $this.data('page', parseInt($this.data('page')) + 1);

            if ($this.data('page') > 3) return setDisable($this, '更多主播试试搜索哦！');

            $.getJSON('{{ route('anchor.cate', [$cate_info->cate_id]) }}?page='+$this.data('page'), function (res) {
                if (res.length) {
                    genElements(res);
                    setEnable($this, '加载更多')
                } else {
                    setDisable($this, '更多主播试试搜索哦！')
                }
            });
        });

        function num2word(num) {
            if (isNaN(parseInt(num))) return num;

            num = parseInt(num);

            if (num < 10000) return num;

            return (num/10000).toFixed(1) + '万';

        }
    </script>
@endsection